<template>
	<div>
		<button @click="isShow = !isShow">点我显示/隐藏</button>
		<transition>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

<script>
export default {
	name:'App',
	data() {
		return {
			isShow:false
		}
	},
}
</script>

<style>
	h1{
		background-color: orange;
		transition: 1s linear all;
	}

	/* 来的起点 也是  离开的终点 */
	.v-enter,.v-leave-to{
		transform: translateX(-100%);
	}
	/* 来的终点 也是 离开的起点 */
	.v-enter-to,.v-leave{
		transform: translateX(0%);
	}

</style>